<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	
	<h:outputText value="#{msg['registrofoto.titulo']}" styleClass="title1" />
	<br /><br />
	<h:panelGrid id="registro" columns="2" styleClass="tablaImagenes" rowClasses="vertical-align: top;valign: top;">
		<h:panelGroup id="info" styleClass="tablaImagenes">
			<rich:panel bodyClass="info">
				<f:facet name="header">
					<h:outputText value="#{msg['registrofoto.infoimagencargada']}" />
				</f:facet>
				<h:outputText value="#{msg['registrofoto.nocargada']}"
					rendered="#{fileUploadBean.size==0}" />
				<rich:dataGrid columns="1" value="#{fileUploadBean.files}"
					var="file" rowKeyVar="row">
					<rich:panel>
						<h:panelGrid columns="2">
							<a4j:mediaOutput element="img" mimeType="#{file.mime}"
								createContent="#{fileUploadBean.paint}" value="#{row}"
								style="width:100px; height:100px;" cacheable="false">
								<f:param value="#{fileUploadBean.timeStamp}" name="time" />
							</a4j:mediaOutput>
							<h:panelGrid columns="1">

								<a4j:commandLink ajaxSingle="true" id="deletelink"
									oncomplete="#{rich:component('deletePanel')}.show()">
									<h:graphicImage value="/img/delete.gif"
										style="border:0" />
									<f:setPropertyActionListener value="#{file}"
										target="#{fileUploadBean.selectedFile}" />
									<f:setPropertyActionListener value="#{row}"
										target="#{fileUploadBean.currentRow}" />
								</a4j:commandLink>
								<rich:toolTip for="deletelink" value="#{msg['registrofoto.eliminar']}" />
							</h:panelGrid>
						</h:panelGrid>
					</rich:panel>
				</rich:dataGrid>
			</rich:panel>
			
			<rich:spacer height="3" />
			
			<br />
			
			<a4j:commandButton action="#{fileUploadBean.clearUploadData}"
				reRender="info, upload" value="#{msg['registrofoto.eliminartodo']}"
				rendered="#{fileUploadBean.size>0}" />
		</h:panelGroup>
		
		<rich:panel bodyClass="info">
			<f:facet name="header">
				<h:outputText value="#{msg['registrofoto.cargar']}" />
			</f:facet>
			<rich:fileUpload fileUploadListener="#{fileUploadBean.listener}"
				maxFilesQuantity="#{fileUploadBean.uploadsAvailable}" id="upload"
				immediateUpload="#{fileUploadBean.autoUpload}"
				acceptedTypes="jpg, gif, png, bmp"
				allowFlash="#{fileUploadBean.useFlash}" addControlLabel="#{msg['fileupload.addControlLabel']}"
				clearAllControlLabel="#{msg['fileupload.clearAllControlLabel']}" clearControlLabel="#{msg['fileupload.clearControlLabel']}"
				uploadControlLabel="#{msg['fileupload.uploadControlLabel']}" doneLabel="#{msg['fileupload.doneLabel']}"
				progressLabel="#{msg['fileupload.progressLabel']}" transferErrorLabel="#{msg['fileupload.transferErrorLabel']}">
				<a4j:support event="onuploadcomplete" reRender="info" />
			</rich:fileUpload>
		</rich:panel>
		
	</h:panelGrid>

	<rich:modalPanel id="deletePanel" autosized="true" width="200">
		<f:facet name="header">
			<h:outputText value="#{msg['registrofoto.eliminar_confirm']}" style="padding-right:15px;" />
		</f:facet>
		<f:facet name="controls">
			<h:panelGroup>
				<h:graphicImage value="/img/close.png"
					styleClass="hidelink" id="hidelink2" />
				<rich:componentControl for="deletePanel" attachTo="hidelink2"
					operation="hide" event="onclick" />
			</h:panelGroup>
		</f:facet>
		<table width="100%">
			<tbody>
				<tr>
					<td align="center" width="50%"><a4j:commandButton value="SI"
						ajaxSingle="true" action="#{fileUploadBean.deleteImage}"
						oncomplete="#{rich:component('deletePanel')}.hide();"
						reRender="info, upload" /></td>
					<td align="center" width="50%"><a4j:commandButton
						value="NO"
						onclick="#{rich:component('deletePanel')}.hide();return false;" />
					</td>
				</tr>
			</tbody>
		</table>
	</rich:modalPanel>

</ui:fragment>













